<template>
  <!-- 收藏 -->
  <div class="w-full">
    <div>
      <HeadTail></HeadTail>
    </div>
    <div class="w-full flex">
      <div class="w-1/5 text-xl">
        <div
          class="w-full text-center flex flex-col xl:-ml-[150px] sm:-ml-[70px]"
        >
          <span
            class="cursor-pointer mt-[6.875rem] text-right xl:text-3xl lg:text-lg md:text-base sm:text-xs leading-[10px]"
            @click="tohome"
            >首页</span
          >
          <span
            class="cursor-pointer mt-[6.875rem] text-right xl:text-3xl lg:text-lg md:text-base sm:text-xs leading-[10px]"
            @click="tosanscks"
            >分类</span
          >
          <span
            class="cursor-pointer mt-[6.875rem] text-right xl:text-3xl lg:text-lg md:text-base sm:text-xs leading-[10px] text-zinc-500"
            >收藏</span
          >
          <span
            class="cursor-pointer mt-[6.875rem] text-right xl:text-3xl lg:text-lg md:text-base sm:text-xs leading-[10px]"
            @click="toorder"
            >订单</span
          >
        </div>
      </div>
      <div class="w-3/5 mt-[80px]">
        <div
          v-for="(item, index) in storeupData"
          :key="index"
          class="border border-black mb-[38px] 2xl:text-[30px]"
        >
          <p class="sm:m-1 2xl:ml-[40px] 2xl:mt-[30px] 2xl:mb-[16px]">
            商品名称：{{ item.productName }}
          </p>
          <div class="flex">
            <img
              :src="item.img.split(',')[1]"
              alt=""
              class="w-1/5 sm:m-1 2xl:ml-[40px]"
            />
          </div>
          <button
            class="2xl:mb-[50px] sm:mb-[20px] mt-[16px] 2xl:ml-[85%] sm:ml-[83%] text-white bg-[#fdc14b] px-2 rounded-xl"
            @click="getshopname(item)"
          >
            下单
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import HeadTail from "@/components/Nhome/HeadTail.vue";
import axios from "axios";
import { reactive, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
let router = useRouter();
let head1 = reactive([
  { title: "首页" },
  { title: "分类" },
  { title: "收藏" },
  { title: "订单" },
]);
let storeupData = ref([]);
function tohome() {
  router.push("Nhome");
}
function toorder() {
  router.push("OrderForm");
}
function tosanscks() {
  router.push("SanscksPane");
}
let userId = ref();
let list = ref();
function getshopname(item) {
  axios
    .get(
      `http://1.14.126.98:8081/product/search?keyword=${item.productName}&current=1&size=10`
    )
    .then((res) => {
      list.value = res.data.records[0];
      router.push({
        name: "Card",
        query: {
          item: JSON.stringify(list.value),
        },
      });
    });
}
onMounted(() => {
  userId.value = localStorage.getItem("userid");
  axios
    .get(`http://1.14.126.98:8081/star/all?userId=${userId.value}`)
    .then((res) => {
      storeupData.value = res.data;
    });
});
</script>
